<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>伊蕾娜</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#FF75A0',
            secondary: '#FFD6E0',
            accent: '#B388EB',
            dark: '#2A2F4F',
            light: '#FDEFF4'
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  <style type="text/tailwindcss">
    @layer utilities {
      .text-shadow {
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
      }
      .text-shadow-lg {
        text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
      }
      .animate-float {
        animation: float 6s ease-in-out infinite;
      }
      .animate-pulse-slow {
        animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
      }
      .bg-gradient-hero {
        background: linear-gradient(135deg, #FF75A0 0%, #B388EB 100%);
      }
      .page-transition {
        transition: opacity 0.5s ease, transform 0.5s ease;
      }
      .page-enter {
        opacity: 0;
        transform: translateX(30px);
      }
      .page-exit {
        opacity: 0;
        transform: translateX(-30px);
      }
      .mobile-menu-visible {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
      }
    }
  </style>
</head>
<body class="bg-light text-dark min-h-screen flex flex-col">
  <!-- 导航栏 -->
  <nav class="bg-white/80 backdrop-blur-md shadow-sm sticky top-0 z-50 transition-all duration-300">
    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
      <div class="flex items-center space-x-2">
        <i class="fa fa-heart text-primary text-2xl"></i>
        <h1 class="text-xl md:text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-accent">伊蕾娜</h1>
      </div>
      <div class="hidden md:flex items-center space-x-6">
        <a href="index.html" class="text-primary font-medium">首页</a>
        <a href="about.html" class="text-dark hover:text-primary transition-colors duration-200 font-medium">关于伊蕾娜</a>
        <a href="gallery.html" class="text-dark hover:text-primary transition-colors duration-200 font-medium">图片</a>
        <a href="message.html" class="text-dark hover:text-primary transition-colors duration-200 font-medium">留言板</a>
        <a href="#share" class="text-dark hover:text-primary transition-colors duration-200 font-medium">分享</a>
      </div>
      <!-- 移动端菜单按钮 -->
      <button class="md:hidden text-dark text-xl" id="mobile-menu-button">
        <i class="fa fa-bars"></i>
      </button>
    </div>
    <!-- 移动端菜单 -->
    <div id="mobile-menu" class="md:hidden bg-white shadow-lg absolute w-full left-0 top-full transform -translate-y-full opacity-0 transition-all duration-300 pointer-events-none">
      <div class="container mx-auto px-4 py-3 flex flex-col space-y-4">
        <a href="index.html" class="text-primary font-medium py-2 border-b border-gray-100">首页</a>
        <a href="about.html" class="text-dark hover:text-primary transition-colors duration-200 font-medium py-2 border-b border-gray-100">关于伊蕾娜</a>
        <a href="gallery.html" class="text-dark hover:text-primary transition-colors duration-200 font-medium py-2 border-b border-gray-100">图片</a>
        <a href="message.html" class="text-dark hover:text-primary transition-colors duration-200 font-medium py-2 border-b border-gray-100">留言板</a>
        <a href="#share" class="text-dark hover:text-primary transition-colors duration-200 font-medium py-2">分享</a>
      </div>
    </div>
  </nav>

  <!-- 英雄区 -->
  <header class="relative bg-gradient-hero overflow-hidden">
    <div class="absolute inset-0 bg-dark/10"></div>
    <div class="container mx-auto px-4 py-20 md:py-32 relative z-10">
      <div class="max-w-3xl mx-auto text-center">
        <div class="relative inline-block mb-8">
          <img src="https://pan.tenire.com/view.php/cded90d2802b5538e279f140b542f44c.webp" alt="伊蕾娜形象" class="w-40 h-40 rounded-full border-4 border-white shadow-lg animate-float object-cover">
          <div class="absolute -top-4 -right-4 bg-primary text-white rounded-full w-12 h-12 flex items-center justify-center text-lg font-bold">
            <i class="fa fa-star"></i>
          </div>
        </div>
        <h2 class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-white mb-6 text-shadow-lg">喜欢伊蕾娜已经</h2>
        <div class="bg-white/90 backdrop-blur-sm rounded-2xl shadow-xl p-8 mb-8 transform transition-all hover:scale-105">
          <div id="counter" class="text-[clamp(3rem,8vw,5rem)] font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-accent mb-2">134</div>
          <p class="text-lg text-dark/80">天 00 小时 00 分钟 00 秒</p>
        </div>
        <p class="text-white/90 text-lg mb-8 max-w-2xl mx-auto">伊蕾娜世界第一可爱</p>
        <div class="flex flex-col sm:flex-row justify-center gap-4">
          <button id="set-date-btn" class="bg-white text-primary hover:bg-primary/90 hover:text-white transition-all duration-300 font-bold py-3 px-8 rounded-full shadow-lg flex items-center justify-center gap-2">
            <i class="fa fa-heart mr-2"></i> 点赞
          </button>

          <a href="https://www.bilibili.com/bangumi/play/ep341208?spm_id_from=333.337.0.0" target="_blank" rel="noopener noreferrer" class="bg-transparent border-2 border-white text-white hover:bg-white/20 transition-all duration-300 font-bold py-3 px-8 rounded-full shadow-lg flex items-center justify-center gap-2">
            <i class="fa fa-play-circle"></i> 观看动画
          </a>
        </div>
      </div>
    </div>
    <!-- 装饰元素 -->
    <div class="absolute bottom-0 left-0 w-full h-16 bg-gradient-to-t from-light to-transparent"></div>
    <div class="absolute top-20 right-10 w-20 h-20 bg-white/20 rounded-full blur-xl"></div>
    <div class="absolute bottom-20 left-10 w-32 h-32 bg-white/10 rounded-full blur-xl"></div>
  </header>

  <!-- 主内容 -->
  <main class="flex-grow">
    <!-- 角色特点展示 -->
    <section class="py-16 bg-gradient-to-b from-light to-white">
      <div class="container mx-auto px-4">
        <h2 class="text-3xl md:text-4xl font-bold text-center mb-12 text-dark"></h2>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-5xl mx-auto">
          <!-- 特点卡片 1 -->
          <div class="bg-white rounded-xl shadow-lg overflow-hidden transform transition-all duration-300 hover:-translate-y-2 hover:shadow-xl page-transition">
            <div class="h-48 overflow-hidden">
              <img src="https://pan.tenire.com/view.php/9bdbb104bd772cd063e2e4903b49720a.webp" alt="伊蕾娜的智慧" class="w-full h-full object-cover transition-transform duration-700 hover:scale-110">
            </div>
            <div class="p-6">
              <div class="w-12 h-12 bg-primary/20 rounded-full flex items-center justify-center mb-4">
                <i class="fa fa-lightbulb-o text-primary text-xl"></i>
              </div>
              <h3 class="text-xl font-bold mb-2 text-dark">   机智</h3>
              <p class="text-dark/70">
                萌物中的萌物 萌物中的支配者  ​​</p>
            </div>
          </div>

          <!-- 特点卡片 2 -->
          <div class="bg-white rounded-xl shadow-lg overflow-hidden transform transition-all duration-300 hover:-translate-y-2 hover:shadow-xl page-transition" style="transition-delay: 100ms;">
            <div class="h-48 overflow-hidden">
              <img src="https://pan.tenire.com/view.php/3940081c12305eba2d0f9d4129b03900.webp" alt="伊蕾娜的独立" class="w-full h-full object-cover transition-transform duration-700 hover:scale-110">
            </div>
            <div class="p-6">
              <div class="w-12 h-12 bg-primary/20 rounded-full flex items-center justify-center mb-4">
                <i class="fa fa-globe text-primary text-xl"></i>
              </div>
              <h3 class="text-xl font-bold mb-2 text-dark">   可爱</h3>
              <p class="text-dark/70">伊蕾娜世界第一可爱</p>
            </div>
          </div>

          <!-- 特点卡片 3 -->
          <div class="bg-white rounded-xl shadow-lg overflow-hidden transform transition-all duration-300 hover:-translate-y-2 hover:shadow-xl page-transition" style="transition-delay: 200ms;">
            <div class="h-48 overflow-hidden">
              <img src="https://pan.tenire.com/view.php/1d0b9a8cb3e819ece62a5aada72fb894.webp" alt="伊蕾娜的温柔" class="w-full h-full object-cover transition-transform duration-700 hover:scale-110">
            </div>
            <div class="p-6">
              <div class="w-12 h-12 bg-primary/20 rounded-full flex items-center justify-center mb-4">
                <i class="fa fa-heart text-primary text-xl"></i>
              </div>
              <h3 class="text-xl font-bold mb-2 text-dark">   温柔</h3>
              <p class="text-dark/70">暗夜要与星尘相伴才会相得益彰</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 经典台词引用 -->
    <section class="py-16 bg-gradient-to-r from-primary/10 to-accent/10">
      <div class="container mx-auto px-4 max-w-4xl">
        <div class="text-center mb-12 page-transition">
          <h2 class="text-3xl md:text-4xl font-bold text-dark mb-4"></h2>
          <div class="w-20 h-1 bg-primary mx-auto rounded-full"></div>
        </div>

        <div class="relative bg-white/80 backdrop-blur-sm rounded-2xl shadow-xl p-8 md:p-12 page-transition">
          <div class="text-5xl text-primary/30 absolute top-4 left-4">
            <i class="fa fa-quote-left"></i>
          </div>
          <blockquote class="relative z-10 text-xl md:text-2xl text-dark/80 italic leading-relaxed mb-6">
            我只是个旅人、只是个魔女，仅此而已。既非无所不能，也不可能万事如意。
          </blockquote>
          <div class="text-right">
            <cite class="text-primary font-bold">— 伊蕾娜，《魔女之旅》</cite>
          </div>
        </div>
      </div>
    </section>

    <!-- 新增喜欢按钮区域 -->
<section class="py-12 bg-white">
  <div class="container mx-auto px-4 max-w-2xl">
    <div class="text-center mb-8 page-transition">
      <h3 class="text-2xl font-bold text-dark">你喜欢伊蕾娜吗？</h3>
    </div>
    <div class="flex justify-center gap-6">
      <button id="like-btn" class="px-8 py-3 bg-primary hover:bg-primary/90 text-white font-bold rounded-full shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2">
        <i class="fa fa-heart mr-2"></i>特别喜欢
      </button>
      <button id="special-like-btn" class="px-8 py-3 bg-secondary hover:bg-secondary/90 text-white font-bold rounded-full shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-secondary focus:ring-offset-2">
        <i class="fa fa-heart mr-2"></i>喜欢
      </button>
    </div>
  </div>
</section>

<!-- 新增喜欢弹窗 -->
<div id="like-modal" class="fixed inset-0 bg-dark/50 backdrop-blur-sm flex items-center justify-center z-50 hidden">
  <div class="bg-white rounded-2xl shadow-2xl p-8 max-w-md mx-4 transform transition-all duration-300 scale-95 opacity-0" id="like-modal-content">
    <div class="text-center">
      <div class="w-16 h-16 bg-primary/20 rounded-full flex items-center justify-center mx-auto mb-4">
        <i class="fa fa-heart text-primary text-2xl"></i>
      </div>
      <h3 class="text-xl font-bold text-dark mb-2">我就知道你喜欢伊蕾娜</h3>
      <p class="text-dark/70 mb-6">真是明智的选择！</p>
      <button id="close-like-modal" class="bg-primary hover:bg-primary/90 text-white font-medium py-2 px-6 rounded-lg transition-colors duration-300">
        确定
      </button>
    </div>
  </div>
</div>

<!-- 新增特别喜欢弹窗 -->
<div id="special-like-modal" class="fixed inset-0 bg-dark/50 backdrop-blur-sm flex items-center justify-center z-50 hidden">
  <div class="bg-white rounded-2xl shadow-2xl p-8 max-w-md mx-4 transform transition-all duration-300 scale-95 opacity-0" id="special-like-modal-content">
    <div class="text-center">
      <div class="w-16 h-16 bg-secondary/20 rounded-full flex items-center justify-center mx-auto mb-4">
        <i class="fa fa-heart text-secondary text-2xl"></i>
      </div>
      <h3 class="text-xl font-bold text-dark mb-2">我就知道你喜欢伊蕾娜</h3>
      <p class="text-dark/70 mb-6">嘿嘿...</p>
      <button id="close-special-like-modal" class="bg-secondary hover:bg-secondary/90 text-white font-medium py-2 px-6 rounded-lg transition-colors duration-300">
        确定
      </button>
    </div>
  </div>
</div>

<!-- 分享区 -->
<section id="share" class="py-16 bg-gradient-to-b from-white to-secondary/30">
      <div class="container mx-auto px-4">
        <h2 class="text-3xl md:text-4xl font-bold text-center mb-6 text-dark">分享你的喜爱</h2>
        <p class="text-center text-dark/70 mb-10 max-w-2xl mx-auto"></p>
        
        <div class="max-w-2xl mx-auto bg-white rounded-2xl shadow-xl p-8 transform transition-all hover:scale-[1.02] page-transition">
          <div class="flex flex-col items-center text-center mb-8">
            <div class="bg-light rounded-xl p-6 w-full mb-6">
              <p class="text-dark/70 mb-2">我已经喜欢伊蕾娜</p>
              <div class="text-3xl font-bold text-primary mb-2" id="share-days">134</div>
              <p class="text-dark/70">天了！</p>
            </div>
            <p class="text-dark/80">"伊蕾娜是世界上最美丽的魔女，我会一直喜欢她！"</p>
          </div>
        </div>
      </div>
    </section>
  </main>

  <!-- 页脚 -->
  <footer class="bg-dark text-white py-10">
    <div class="container mx-auto px-4">
      <div class="border-t border-white/10 mt-8 pt-8 text-center text-white/50 text-sm">
        <p>© 2025</p>
      </div>
    </div>
  </footer>

  <!-- 设置日期模态框 -->
  <div id="date-modal" class="fixed inset-0 bg-dark/50 backdrop-blur-sm flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-2xl shadow-2xl max-w-md w-full mx-4 transform transition-all duration-300 scale-95 opacity-0" id="modal-content">
      <div class="p-6">
        <div class="flex justify-between items-center mb-4">
          <h3 class="text-xl font-bold text-dark">设置喜欢日期</h3>
          <button id="close-modal" class="text-dark/50 hover:text-dark">
            <i class="fa fa-times"></i>
          </button>
        </div>
        <p class="text-dark/70 mb-6">选择你第一次喜欢上伊蕾娜的日期</p>
        <div class="mb-6">
          <label for="start-date" class="block text-dark/80 mb-2 font-medium">开始日期</label>
          <input type="date" id="start-date" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary">
        </div>
        <div class="flex space-x-4">
          <button id="cancel-modal" class="flex-1 bg-gray-200 hover:bg-gray-300 text-dark font-medium py-2 px-4 rounded-lg transition-colors duration-300">
            取消
          </button>
          <button id="save-date" class="flex-1 bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-300">
            保存
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- 复制成功提示 -->
  <div id="copy-toast" class="fixed bottom-6 right-6 bg-dark text-white px-6 py-3 rounded-lg shadow-lg transform translate-y-16 opacity-0 transition-all duration-300 flex items-center gap-2 z-50">
    <i class="fa fa-check-circle text-green-400"></i>
    <span>链接已复制到剪贴板</span>
  </div>

  <script>
    // 初始化日期 - 从2025年3月26日开始
    let countStartDate; // 移到try外部声明变量
// 移除重复声明，因为变量已在 try-catch 块中处理
    // 由于后续代码中可能已声明这些变量，这里注释掉重复声明以避免重复声明错误
    // let counterElement, shareDaysElement, startDateDisplay, currentDateDisplay;
    
    try {
      countStartDate = new Date('2025-03-26'); // 仅赋值，不重新声明
      currentDate = new Date();
      
      // DOM 元素
      counterElement = document.getElementById('counter');
      shareDaysElement = document.getElementById('share-days');
      startDateDisplay = document.getElementById('start-date-display');
      currentDateDisplay = document.getElementById('current-date-display');
      const setDateBtn = document.getElementById('set-date-btn');
      const closeModalBtn = document.getElementById('close-modal');
      const cancelModalBtn = document.getElementById('cancel-modal');
      const saveDateBtn = document.getElementById('save-date');
      const startDateInput = document.getElementById('start-date');
      const dateModal = document.getElementById('date-modal');
      const modalContent = document.getElementById('modal-content');
      const copyToast = document.getElementById('copy-toast');

      // 检查获取的元素是否为 null
      const elements = {
        'counter': counterElement,
        'share-days': shareDaysElement,
        'start-date-display': startDateDisplay,
        'current-date-display': currentDateDisplay,
        'set-date-btn': setDateBtn,
        'close-modal': closeModalBtn,
        'cancel-modal': cancelModalBtn,
        'save-date': saveDateBtn,
        'start-date': startDateInput,
        'date-modal': dateModal,
        'modal-content': modalContent,
        'copy-toast': copyToast
      };

      for (const [id, element] of Object.entries(elements)) {
        if (element === null) {
          console.error(`元素 #${id} 未找到，请检查 HTML 中是否存在该元素。`);
        }
      }
    } catch (error) {
      console.error('初始化代码时发生错误:', error);
      // 添加错误恢复逻辑
      countStartDate = new Date('2025-03-26');
      currentDate = new Date();
    }
    
    // 设置日期显示
    function formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}年${month}月${day}日`;
    }
    
    // 确保变量在try-catch后仍可访问
    if (countStartDate && currentDate && startDateDisplay && currentDateDisplay) {
      startDateDisplay.textContent = formatDate(countStartDate);
      currentDateDisplay.textContent = formatDate(currentDate);
    }
    
    // 计算天数差
    function calculateDaysDifference(startDate, endDate) {
      const oneDay = 24 * 60 * 60 * 1000; // 一天的毫秒数
      const diffMs = Math.abs(endDate - startDate);
      return Math.floor(diffMs / oneDay);
    }
    
    // 计算时分秒
    function calculateTimeDifference(startDate, endDate) {
      const diffMs = endDate - startDate;
      const hours = Math.floor((diffMs % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      const minutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));
      const seconds = Math.floor((diffMs % (1000 * 60)) / 1000);
      
      return {
        hours: String(hours).padStart(2, '0'),
        minutes: String(minutes).padStart(2, '0'),
        seconds: String(seconds).padStart(2, '0')
      };
    }
    
    // 更新计数器
    function updateCounter() {
      if (!countStartDate) return; // 防止未初始化时出错
      const now = new Date();
      const days = calculateDaysDifference(countStartDate, now);
      const timeDiff = calculateTimeDifference(countStartDate, now);
      
      // 确保DOM元素存在再更新
      if (counterElement && shareDaysElement) {
        counterElement.textContent = days;
        shareDaysElement.textContent = days;
        
        // 更新时分秒显示
        const counterParent = counterElement.parentElement;
        const timeDisplay = counterParent?.querySelector('p');
        if (timeDisplay) {
          timeDisplay.textContent = `${days}天 ${timeDiff.hours}小时 ${timeDiff.minutes}分钟 ${timeDiff.seconds}秒`;
        }
      }
    }
    
    // 初始化计数器
    updateCounter();
    
    // 每秒更新一次
    setInterval(updateCounter, 1000);
    
    // 模态框动画
    function openModal() {
      dateModal.classList.remove('hidden');
      setTimeout(() => {
        modalContent.classList.remove('scale-95', 'opacity-0');
        modalContent.classList.add('scale-100', 'opacity-100');
      }, 10);
      
      // 设置默认日期为当前日期
      const today = new Date();
      const formattedDate = today.toISOString().split('T')[0];
      startDateInput.value = formattedDate;
    }
    
    function closeModal() {
      modalContent.classList.remove('scale-100', 'opacity-100');
      modalContent.classList.add('scale-95', 'opacity-0');
      setTimeout(() => {
        dateModal.classList.add('hidden');
      }, 300);
    }
    
    // 模态框事件监听
    setDateBtn.addEventListener('click', openModal);
    closeModalBtn.addEventListener('click', closeModal);
    cancelModalBtn.addEventListener('click', closeModal);
    
    // 保存日期
    saveDateBtn.addEventListener('click', () => {
      const selectedDate = new Date(startDateInput.value);
      
      if (selectedDate && !isNaN(selectedDate.getTime())) {
        // 更新开始日期
        countStartDate.setTime(selectedDate.getTime());
        
        // 更新显示
        startDateDisplay.textContent = formatDate(countStartDate);
        
        // 重置计数器
        updateCounter();
        
        // 关闭模态框
        closeModal();
        
        // 显示成功消息
        showToast('日期已更新！');
      } else {
        showToast('请选择一个有效的日期！');
      }
    });
    
    // 显示提示消息
    function showToast(message) {
      copyToast.querySelector('span').textContent = message;
      copyToast.classList.remove('translate-y-16', 'opacity-0');
      copyToast.classList.add('translate-y-0', 'opacity-100');
      
      setTimeout(() => {
        copyToast.classList.remove('translate-y-0', 'opacity-100');
        copyToast.classList.add('translate-y-16', 'opacity-0');
      }, 3000);
    }
    
    // 滚动时导航栏效果
    window.addEventListener('scroll', () => {
      const nav = document.querySelector('nav');
      if (window.scrollY > 50) {
        nav.classList.add('py-2', 'shadow-md');
        nav.classList.remove('py-3', 'shadow-sm');
      } else {
        nav.classList.add('py-3', 'shadow-sm');
        nav.classList.remove('py-2', 'shadow-md');
      }
    });
    
    // 页面切换动画
    document.addEventListener('DOMContentLoaded', () => {
      // 为所有内部链接添加动画
      document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
          e.preventDefault(); // 阻止默认跳转行为

          const targetId = this.getAttribute('href');
          const targetElement = document.querySelector(targetId);

          if (targetElement) {
            // 平滑滚动到目标元素
            window.scrollTo({
              top: targetElement.offsetTop,
              behavior: 'smooth'
            });
          }
        });
      });
      
      // 页面加载时添加进入动画
      document.body.classList.add('page-transition');
      setTimeout(() => {
        document.body.classList.remove('page-enter');
      }, 100);
    });
  </script>
</body>
</html>
  <!-- 移动端菜单切换脚本 -->
  <script>
    const menuButton = document.getElementById('mobile-menu-button');
    const mobileMenu = document.getElementById('mobile-menu');
    
    if (menuButton && mobileMenu) {
      menuButton.addEventListener('click', () => {
        mobileMenu.classList.toggle('mobile-menu-visible');
        // 切换图标
        const icon = menuButton.querySelector('i');
        if (mobileMenu.classList.contains('mobile-menu-visible')) {
          icon.classList.remove('fa-bars');
          icon.classList.add('fa-times');
        } else {
          icon.classList.remove('fa-times');
          icon.classList.add('fa-bars');
        }
      });
    
      // 点击菜单项后关闭菜单
      const menuItems = mobileMenu.querySelectorAll('a');
      menuItems.forEach(item => {
        item.addEventListener('click', () => {
          mobileMenu.classList.remove('mobile-menu-visible');
          const icon = menuButton.querySelector('i');
          icon.classList.remove('fa-times');
          icon.classList.add('fa-bars');
        });
      });
    };

    // 喜欢按钮弹窗逻辑
    const likeBtn = document.getElementById('like-btn');
    const likeModal = document.getElementById('like-modal');
    const likeModalContent = document.getElementById('like-modal-content');
    const closeLikeModal = document.getElementById('close-like-modal');

    // 特别喜欢按钮弹窗逻辑
    const specialLikeBtn = document.getElementById('special-like-btn');
    const specialLikeModal = document.getElementById('special-like-modal');
    const specialLikeModalContent = document.getElementById('special-like-modal-content');
    const closeSpecialLikeModal = document.getElementById('close-special-like-modal');

    function openLikeModal() {
      likeModal.classList.remove('hidden');
      setTimeout(() => {
        likeModalContent.classList.remove('scale-95', 'opacity-0');
        likeModalContent.classList.add('scale-100', 'opacity-100');
      }, 10);
    }

    function closeLikeModalFunc() {
      likeModalContent.classList.remove('scale-100', 'opacity-100');
      likeModalContent.classList.add('scale-95', 'opacity-0');
      setTimeout(() => {
        likeModal.classList.add('hidden');
      }, 300);
    }

    function openSpecialLikeModal() {
      specialLikeModal.classList.remove('hidden');
      setTimeout(() => {
        specialLikeModalContent.classList.remove('scale-95', 'opacity-0');
        specialLikeModalContent.classList.add('scale-100', 'opacity-100');
      }, 10);
    }

    function closeSpecialLikeModalFunc() {
      specialLikeModalContent.classList.remove('scale-100', 'opacity-100');
      specialLikeModalContent.classList.add('scale-95', 'opacity-0');
      setTimeout(() => {
        specialLikeModal.classList.add('hidden');
      }, 300);
    }

    likeBtn.addEventListener('click', openLikeModal);
    closeLikeModal.addEventListener('click', closeLikeModalFunc);
    specialLikeBtn.addEventListener('click', openSpecialLikeModal);
    closeSpecialLikeModal.addEventListener('click', closeSpecialLikeModalFunc);

    // 点击模态框外部关闭
    likeModal.addEventListener('click', (e) => {
      if (e.target === likeModal) {
        closeLikeModalFunc();
      }
    });

    specialLikeModal.addEventListener('click', (e) => {
      if (e.target === specialLikeModal) {
        closeSpecialLikeModalFunc();
      }
    });
  </script>
</body>
</html>
  <!-- 音频播放器 -->
  <div class="fixed bottom-6 left-6 z-50 flex items-center gap-3">
    <button id="music-toggle" class="bg-primary text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg hover:bg-primary/90 transition-all">
      <i class="fa fa-play" id="music-icon"></i>
    </button>
    <audio id="background-music" loop playsinline>
      <source src="https://pan.tenire.com/down.php/13bb286fa12c994ab80f420d972c486f.mp3" type="audio/mpeg">
     您的浏览器不支持音频播放
    </audio>
  </div>

  <script>
    // 音频播放控制
    document.addEventListener('DOMContentLoaded', function() {
      const audio = document.getElementById('background-music');
      const toggleBtn = document.getElementById('music-toggle');
      const musicIcon = document.getElementById('music-icon');
      let isPlaying = false;

      // 尝试自动播放（针对支持的浏览器）
      audio.play().then(() => {
        updatePlayState(true);
        console.log('音乐自动播放成功');
      }).catch(error => {
        console.log('自动播放需要用户交互:', error);
      });

      // 播放/暂停切换
      toggleBtn.addEventListener('click', function() {
        if (isPlaying) {
          audio.pause();
        } else {
          audio.play();
        }
      });

      // 更新播放状态
      function updatePlayState(playing) {
        isPlaying = playing;
        musicIcon.className = playing ? 'fa fa-pause' : 'fa fa-play';
      }

      // 监听音频播放状态变化
      audio.addEventListener('play', () => updatePlayState(true));
      audio.addEventListener('pause', () => updatePlayState(false));
    });
  </script>
</body>
</html>
  <!-- 复制成功提示 -->
  <div id="copy-toast" class="fixed bottom-6 right-6 bg-dark text-white px-6 py-3 rounded-lg shadow-lg transform translate-y-16 opacity-0 transition-all duration-300 flex items-center gap-2 z-50">
    <i class="fa fa-check-circle text-green-400"></i>
    <span>链接已复制到剪贴板</span>
  </div>

  <script>
    // 初始化日期 - 从2025年3月26日开始（134天前）
    try {
      const startDate = new Date('2025-03-26');
      const currentDate = new Date();
      
      // DOM 元素
      const counterElement = document.getElementById('counter');
      const shareDaysElement = document.getElementById('share-days');
      const startDateDisplay = document.getElementById('start-date-display');
      const currentDateDisplay = document.getElementById('current-date-display');
      const setDateBtn = document.getElementById('set-date-btn');
      const closeModalBtn = document.getElementById('close-modal');
      const cancelModalBtn = document.getElementById('cancel-modal');
      const saveDateBtn = document.getElementById('save-date');
      const startDateInput = document.getElementById('start-date');
      const dateModal = document.getElementById('date-modal');
      const modalContent = document.getElementById('modal-content');
      const copyToast = document.getElementById('copy-toast');

      // 检查获取的元素是否为 null
      const elements = {
        'counter': counterElement,
        'share-days': shareDaysElement,
        'start-date-display': startDateDisplay,
        'current-date-display': currentDateDisplay,
        'set-date-btn': setDateBtn,
        'close-modal': closeModalBtn,
        'cancel-modal': cancelModalBtn,
        'save-date': saveDateBtn,
        'start-date': startDateInput,
        'date-modal': dateModal,
        'modal-content': modalContent,
        'copy-toast': copyToast
      };

      for (const [id, element] of Object.entries(elements)) {
        if (element === null) {
          console.error(`元素 #${id} 未找到，请检查 HTML 中是否存在该元素。`);
        }
      }
    } catch (error) {
      console.error('初始化代码时发生错误:', error);
    }
    
    // 设置日期显示
    function formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}年${month}月${day}日`;
    }
    
    startDateDisplay.textContent = formatDate(startDate);
    currentDateDisplay.textContent = formatDate(currentDate);
    
    // 计算天数差
    function calculateDaysDifference(startDate, endDate) {
      const oneDay = 24 * 60 * 60 * 1000; // 一天的毫秒数
      const diffMs = Math.abs(endDate - startDate);
      return Math.floor(diffMs / oneDay);
    }
    
    // 计算时分秒
    function calculateTimeDifference(startDate, endDate) {
      const diffMs = endDate - startDate;
      const hours = Math.floor((diffMs % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      const minutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));
      const seconds = Math.floor((diffMs % (1000 * 60)) / 1000);
      
      return {
        hours: String(hours).padStart(2, '0'),
        minutes: String(minutes).padStart(2, '0'),
        seconds: String(seconds).padStart(2, '0')
      };
    }
    
    // 更新计数器
    function updateCounter() {
      const now = new Date();
      const days = calculateDaysDifference(startDate, now);
      const timeDiff = calculateTimeDifference(startDate, now);
      
      counterElement.textContent = days;
      shareDaysElement.textContent = days;
      
      // 更新时分秒显示
      const counterParent = counterElement.parentElement;
      const timeDisplay = counterParent.querySelector('p');
      if (timeDisplay) {
        timeDisplay.textContent = `${days}天 ${timeDiff.hours}小时 ${timeDiff.minutes}分钟 ${timeDiff.seconds}秒`;
      }
    }
    
    // 初始化计数器
    updateCounter();
    
    // 每秒更新一次
    setInterval(updateCounter, 1000);
    
    // 模态框动画
    function openModal() {
      dateModal.classList.remove('hidden');
      setTimeout(() => {
        modalContent.classList.remove('scale-95', 'opacity-0');
        modalContent.classList.add('scale-100', 'opacity-100');
      }, 10);
      
      // 设置默认日期为当前日期
      const today = new Date();
      const formattedDate = today.toISOString().split('T')[0];
      startDateInput.value = formattedDate;
    }
    
    function closeModal() {
      modalContent.classList.remove('scale-100', 'opacity-100');
      modalContent.classList.add('scale-95', 'opacity-0');
      setTimeout(() => {
        dateModal.classList.add('hidden');
      }, 300);
    }
    
    // 模态框事件监听
    setDateBtn.addEventListener('click', openModal);
    closeModalBtn.addEventListener('click', closeModal);
    cancelModalBtn.addEventListener('click', closeModal);
    
    // 保存日期
    saveDateBtn.addEventListener('click', () => {
      const selectedDate = new Date(startDateInput.value);
      
      if (selectedDate && !isNaN(selectedDate.getTime())) {
        // 更新开始日期
        startDate.setTime(selectedDate.getTime());
        
        // 更新显示
        startDateDisplay.textContent = formatDate(startDate);
        
        // 重置计数器
        updateCounter();
        
        // 关闭模态框
        closeModal();
        
        // 显示成功消息
        showToast('日期已更新！');
      } else {
        showToast('请选择一个有效的日期！');
      }
    });
    
    // 显示提示消息
    function showToast(message) {
      copyToast.querySelector('span').textContent = message;
      copyToast.classList.remove('translate-y-16', 'opacity-0');
      copyToast.classList.add('translate-y-0', 'opacity-100');
      
      setTimeout(() => {
        copyToast.classList.remove('translate-y-0', 'opacity-100');
        copyToast.classList.add('translate-y-16', 'opacity-0');
      }, 3000);
    }
    
    // 滚动时导航栏效果
    window.addEventListener('scroll', () => {
      const nav = document.querySelector('nav');
      if (window.scrollY > 50) {
        nav.classList.add('py-2', 'shadow-md');
        nav.classList.remove('py-3', 'shadow-sm');
      } else {
        nav.classList.add('py-3', 'shadow-sm');
        nav.classList.remove('py-2', 'shadow-md');
      }
    });
    
    // 页面切换动画
    document.addEventListener('DOMContentLoaded', () => {
      // 为所有内部链接添加动画
      document.querySelectorAll('a[href^="./"], a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
          e.preventDefault();
          
          // 获取目标URL
          const targetUrl = this.getAttribute('href');
          
          // 添加页面退出动画
          document.body.classList.add('page-exit');
          
          // 延迟后跳转到目标页面
          setTimeout(() => {
            window.location.href = targetUrl;
          }, 500);
        });
      });
      
      // 页面加载时添加进入动画
      document.body.classList.add('page-transition');
      setTimeout(() => {
        document.body.classList.remove('page-enter');
      }, 100);
    });
  </script>
</body>
</html>
  <!-- 复制成功提示 -->
  <div id="copy-toast" class="fixed bottom-6 right-6 bg-dark text-white px-6 py-3 rounded-lg shadow-lg transform translate-y-16 opacity-0 transition-all duration-300 flex items-center gap-2 z-50">
    <i class="fa fa-check-circle text-green-400"></i>
    <span>链接已复制到剪贴板</span>
  </div>

  <script>
    // 初始化日期 - 从2025年3月26日开始（134天前）
    // 使用 try-catch 包裹代码，捕获可能出现的错误
    try {
      const startDate = new Date('2025-03-26');
      const currentDate = new Date();
      
      // DOM 元素
      const counterElement = document.getElementById('counter');
      const shareDaysElement = document.getElementById('share-days');
      const startDateDisplay = document.getElementById('start-date-display');
      const currentDateDisplay = document.getElementById('current-date-display');
      const setDateBtn = document.getElementById('set-date-btn');
      const closeModalBtn = document.getElementById('close-modal');
      const cancelModalBtn = document.getElementById('cancel-modal');
      const saveDateBtn = document.getElementById('save-date');
      const startDateInput = document.getElementById('start-date');
      const dateModal = document.getElementById('date-modal');
      const modalContent = document.getElementById('modal-content');
      const copyToast = document.getElementById('copy-toast');

      // 检查获取的元素是否为 null
      const elements = {
        'counter': counterElement,
        'share-days': shareDaysElement,
        'start-date-display': startDateDisplay,
        'current-date-display': currentDateDisplay,
        'set-date-btn': setDateBtn,
        'close-modal': closeModalBtn,
        'cancel-modal': cancelModalBtn,
        'save-date': saveDateBtn,
        'start-date': startDateInput,
        'date-modal': dateModal,
        'modal-content': modalContent,
        'copy-toast': copyToast
      };

      for (const [id, element] of Object.entries(elements)) {
        if (element === null) {
          console.error(`元素 #${id} 未找到，请检查 HTML 中是否存在该元素。`);
        }
      }
    } catch (error) {
      console.error('初始化代码时发生错误:', error);
    }
    
    // 设置日期显示
    function formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}年${month}月${day}日`;
    }
    
    startDateDisplay.textContent = formatDate(startDate);
    currentDateDisplay.textContent = formatDate(currentDate);
    
    // 计算天数差
    function calculateDaysDifference(startDate, endDate) {
      const oneDay = 24 * 60 * 60 * 1000; // 一天的毫秒数
      const diffMs = Math.abs(endDate - startDate);
      return Math.floor(diffMs / oneDay);
    }
    
    // 计算时分秒
    function calculateTimeDifference(startDate, endDate) {
      const diffMs = endDate - startDate;
      const hours = Math.floor((diffMs % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      const minutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));
      const seconds = Math.floor((diffMs % (1000 * 60)) / 1000);
      
      return {
        hours: String(hours).padStart(2, '0'),
        minutes: String(minutes).padStart(2, '0'),
        seconds: String(seconds).padStart(2, '0')
      };
    }
    
    // 更新计数器
    function updateCounter() {
      const now = new Date();
      const days = calculateDaysDifference(startDate, now);
      const timeDiff = calculateTimeDifference(startDate, now);
      
      counterElement.textContent = days;
      shareDaysElement.textContent = days;
      
      // 更新时分秒显示
      const counterParent = counterElement.parentElement;
      const timeDisplay = counterParent.querySelector('p');
      if (timeDisplay) {
        timeDisplay.textContent = `${days}天 ${timeDiff.hours}小时 ${timeDiff.minutes}分钟 ${timeDiff.seconds}秒`;
      }
    }
    
    // 初始化计数器
    updateCounter();
    
    // 每秒更新一次
    setInterval(updateCounter, 1000);
    
    // 模态框动画
    function openModal() {
      dateModal.classList.remove('hidden');
      setTimeout(() => {
        modalContent.classList.remove('scale-95', 'opacity-0');
        modalContent.classList.add('scale-100', 'opacity-100');
      }, 10);
      
      // 设置默认日期为当前日期
      const today = new Date();
      const formattedDate = today.toISOString().split('T')[0];
      startDateInput.value = formattedDate;
    }
    
    function closeModal() {
      modalContent.classList.remove('scale-100', 'opacity-100');
      modalContent.classList.add('scale-95', 'opacity-0');
      setTimeout(() => {
        dateModal.classList.add('hidden');
      }, 300);
    }
    
    // 模态框事件监听
    setDateBtn.addEventListener('click', openModal);
    closeModalBtn.addEventListener('click', closeModal);
    cancelModalBtn.addEventListener('click', closeModal);
    
    // 保存日期
    saveDateBtn.addEventListener('click', () => {
      const selectedDate = new Date(startDateInput.value);
      
      if (selectedDate && !isNaN(selectedDate.getTime())) {
        // 更新开始日期
        startDate.setTime(selectedDate.getTime());
        
        // 更新显示
        startDateDisplay.textContent = formatDate(startDate);
        
        // 重置计数器
        updateCounter();
        
        // 关闭模态框
        closeModal();
        
        // 显示成功消息
        showToast('日期已更新！');
      } else {
        showToast('请选择一个有效的日期！');
      }
    });
    
    // 显示提示消息
    function showToast(message) {
      copyToast.querySelector('span').textContent = message;
      copyToast.classList.remove('translate-y-16', 'opacity-0');
      copyToast.classList.add('translate-y-0', 'opacity-100');
      
      setTimeout(() => {
        copyToast.classList.remove('translate-y-0', 'opacity-100');
        copyToast.classList.add('translate-y-16', 'opacity-0');
      }, 3000);
    }
    
    // 滚动时导航栏效果
    window.addEventListener('scroll', () => {
      const nav = document.querySelector('nav');
      if (window.scrollY > 50) {
        nav.classList.add('py-2', 'shadow-md');
        nav.classList.remove('py-3', 'shadow-sm');
      } else {
        nav.classList.add('py-3', 'shadow-sm');
        nav.classList.remove('py-2', 'shadow-md');
      }
    });
    
    // 页面切换动画
    document.addEventListener('DOMContentLoaded', () => {
      // 为所有内部链接添加动画
      document.querySelectorAll('a[href^="./"], a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
          e.preventDefault();
          
          // 获取目标URL
          const targetUrl = this.getAttribute('href');
          
          // 添加页面退出动画
          document.body.classList.add('page-exit');
          
          // 延迟后跳转到目标页面
          setTimeout(() => {
            window.location.href = targetUrl;
          }, 500);
        });
      });
      
      // 页面加载时添加进入动画
      document.body.classList.add('page-transition');
      setTimeout(() => {
        document.body.classList.remove('page-enter');
      }, 100);
    });
  </script>
</body>
</html>
  <!-- 复制成功提示 -->
  <div id="copy-toast" class="fixed bottom-6 right-6 bg-dark text-white px-6 py-3 rounded-lg shadow-lg transform translate-y-16 opacity-0 transition-all duration-300 flex items-center gap-2 z-50">
    <i class="fa fa-check-circle text-green-400"></i>
    <span>链接已复制到剪贴板</span>
  </div>

  <script>
    // 初始化日期 - 从2025年3月26日开始（134天前）
    try {
      const startDate = new Date('2025-03-26');
      const currentDate = new Date();
      
      // DOM 元素
      const counterElement = document.getElementById('counter');
      const shareDaysElement = document.getElementById('share-days');
      const startDateDisplay = document.getElementById('start-date-display');
      const currentDateDisplay = document.getElementById('current-date-display');
      const setDateBtn = document.getElementById('set-date-btn');
      const closeModalBtn = document.getElementById('close-modal');
      const cancelModalBtn = document.getElementById('cancel-modal');
      const saveDateBtn = document.getElementById('save-date');
      const startDateInput = document.getElementById('start-date');
      const dateModal = document.getElementById('date-modal');
      const modalContent = document.getElementById('modal-content');
      const copyToast = document.getElementById('copy-toast');

      // 检查获取的元素是否为 null
      const elements = {
        'counter': counterElement,
        'share-days': shareDaysElement,
        'start-date-display': startDateDisplay,
        'current-date-display': currentDateDisplay,
        'set-date-btn': setDateBtn,
        'close-modal': closeModalBtn,
        'cancel-modal': cancelModalBtn,
        'save-date': saveDateBtn,
        'start-date': startDateInput,
        'date-modal': dateModal,
        'modal-content': modalContent,
        'copy-toast': copyToast
      };

      for (const [id, element] of Object.entries(elements)) {
        if (element === null) {
          console.error(`元素 #${id} 未找到，请检查 HTML 中是否存在该元素。`);
        }
      }
    } catch (error) {
      console.error('初始化代码时发生错误:', error);
    }
    
    // 设置日期显示
    function formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}年${month}月${day}日`;
    }
    
    startDateDisplay.textContent = formatDate(startDate);
    currentDateDisplay.textContent = formatDate(currentDate);
    
    // 计算天数差
    function calculateDaysDifference(startDate, endDate) {
      const oneDay = 24 * 60 * 60 * 1000; // 一天的毫秒数
      const diffMs = Math.abs(endDate - startDate);
      return Math.floor(diffMs / oneDay);
    }
    
    // 计算时分秒
    function calculateTimeDifference(startDate, endDate) {
      const diffMs = endDate - startDate;
      const hours = Math.floor((diffMs % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      const minutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));
      const seconds = Math.floor((diffMs % (1000 * 60)) / 1000);
      
      return {
        hours: String(hours).padStart(2, '0'),
        minutes: String(minutes).padStart(2, '0'),
        seconds: String(seconds).padStart(2, '0')
      };
    }
    
    // 更新计数器
    function updateCounter() {
      const now = new Date();
      const days = calculateDaysDifference(startDate, now);
      const timeDiff = calculateTimeDifference(startDate, now);
      
      counterElement.textContent = days;
      shareDaysElement.textContent = days;
      
      // 更新时分秒显示
      const counterParent = counterElement.parentElement;
      const timeDisplay = counterParent.querySelector('p');
      if (timeDisplay) {
        timeDisplay.textContent = `${days}天 ${timeDiff.hours}小时 ${timeDiff.minutes}分钟 ${timeDiff.seconds}秒`;
      }
    }
    
    // 初始化计数器
    updateCounter();
    
    // 每秒更新一次
    setInterval(updateCounter, 1000);
    
    // 模态框动画
    function openModal() {
      dateModal.classList.remove('hidden');
      setTimeout(() => {
        modalContent.classList.remove('scale-95', 'opacity-0');
        modalContent.classList.add('scale-100', 'opacity-100');
      }, 10);
      
      // 设置默认日期为当前日期
      const today = new Date();
      const formattedDate = today.toISOString().split('T')[0];
      startDateInput.value = formattedDate;
    }
    
    function closeModal() {
      modalContent.classList.remove('scale-100', 'opacity-100');
      modalContent.classList.add('scale-95', 'opacity-0');
      setTimeout(() => {
        dateModal.classList.add('hidden');
      }, 300);
    }
    
    // 模态框事件监听
    setDateBtn.addEventListener('click', openModal);
    closeModalBtn.addEventListener('click', closeModal);
    cancelModalBtn.addEventListener('click', closeModal);
    
    // 保存日期
    saveDateBtn.addEventListener('click', () => {
      const selectedDate = new Date(startDateInput.value);
      
      if (selectedDate && !isNaN(selectedDate.getTime())) {
        // 更新开始日期
        startDate.setTime(selectedDate.getTime());
        
        // 更新显示
        startDateDisplay.textContent = formatDate(startDate);
        
        // 重置计数器
        updateCounter();
        
        // 关闭模态框
        closeModal();
        
        // 显示成功消息
        showToast('日期已更新！');
      } else {
        showToast('请选择一个有效的日期！');
      }
    });
    
    // 显示提示消息
    function showToast(message) {
      copyToast.querySelector('span').textContent = message;
      copyToast.classList.remove('translate-y-16', 'opacity-0');
      copyToast.classList.add('translate-y-0', 'opacity-100');
      
      setTimeout(() => {
        copyToast.classList.remove('translate-y-0', 'opacity-100');
        copyToast.classList.add('translate-y-16', 'opacity-0');
      }, 3000);
    }
    
    // 滚动时导航栏效果
    window.addEventListener('scroll', () => {
      const nav = document.querySelector('nav');
      if (window.scrollY > 50) {
        nav.classList.add('py-2', 'shadow-md');
        nav.classList.remove('py-3', 'shadow-sm');
      } else {
        nav.classList.add('py-3', 'shadow-sm');
        nav.classList.remove('py-2', 'shadow-md');
      }
    });
    
    // 页面切换动画
    document.addEventListener('DOMContentLoaded', () => {
      // 为所有内部链接添加动画
      document.querySelectorAll('a[href^="./"], a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
          e.preventDefault();
          
          // 获取目标URL
          const targetUrl = this.getAttribute('href');
          
          // 添加页面退出动画
          document.body.classList.add('page-exit');
          
          // 延迟后跳转到目标页面
          setTimeout(() => {
            window.location.href = targetUrl;
          }, 500);
        });
      });
      
      // 页面加载时添加进入动画
      document.body.classList.add('page-transition');
      setTimeout(() => {
        document.body.classList.remove('page-enter');
      }, 100);
    });
  </script>
</body>
</html>
  <!-- 复制成功提示 -->
  <div id="copy-toast" class="fixed bottom-6 right-6 bg-dark text-white px-6 py-3 rounded-lg shadow-lg transform translate-y-16 opacity-0 transition-all duration-300 flex items-center gap-2 z-50">
    <i class="fa fa-check-circle text-green-400"></i>
    <span>链接已复制到剪贴板</span>
  </div>

  <script>
    // 初始化日期 - 从2025年3月26日开始（134天前）
    // 使用 try-catch 包裹代码，捕获可能出现的错误
    try {
      const startDate = new Date('2025-03-26');
      const currentDate = new Date();
      
      // DOM 元素
      const counterElement = document.getElementById('counter');
      const shareDaysElement = document.getElementById('share-days');
      const startDateDisplay = document.getElementById('start-date-display');
      const currentDateDisplay = document.getElementById('current-date-display');
      const setDateBtn = document.getElementById('set-date-btn');
      const closeModalBtn = document.getElementById('close-modal');
      const cancelModalBtn = document.getElementById('cancel-modal');
      const saveDateBtn = document.getElementById('save-date');
      const startDateInput = document.getElementById('start-date');
      const dateModal = document.getElementById('date-modal');
      const modalContent = document.getElementById('modal-content');
      const copyToast = document.getElementById('copy-toast');

      // 检查获取的元素是否为 null
      const elements = {
        'counter': counterElement,
        'share-days': shareDaysElement,
        'start-date-display': startDateDisplay,
        'current-date-display': currentDateDisplay,
        'set-date-btn': setDateBtn,
        'close-modal': closeModalBtn,
        'cancel-modal': cancelModalBtn,
        'save-date': saveDateBtn,
        'start-date': startDateInput,
        'date-modal': dateModal,
        'modal-content': modalContent,
        'copy-toast': copyToast
      };

      for (const [id, element] of Object.entries(elements)) {
        if (element === null) {
          console.error(`元素 #${id} 未找到，请检查 HTML 中是否存在该元素。`);
        }
      }
    } catch (error) {
      console.error('初始化代码时发生错误:', error);
    }
    
    // 设置日期显示
    function formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}年${month}月${day}日`;
    }
    
    startDateDisplay.textContent = formatDate(startDate);
    currentDateDisplay.textContent = formatDate(currentDate);
    
    // 计算天数差
    function calculateDaysDifference(startDate, endDate) {
      const oneDay = 24 * 60 * 60 * 1000; // 一天的毫秒数
      const diffMs = Math.abs(endDate - startDate);
      return Math.floor(diffMs / oneDay);
    }
    
    // 计算时分秒
    function calculateTimeDifference(startDate, endDate) {
      const diffMs = endDate - startDate;
      const hours = Math.floor((diffMs % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      const minutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));
      const seconds = Math.floor((diffMs % (1000 * 60)) / 1000);
      
      return {
        hours: String(hours).padStart(2, '0'),
        minutes: String(minutes).padStart(2, '0'),
        seconds: String(seconds).padStart(2, '0')
      };
    }
    
    // 更新计数器
    function updateCounter() {
      const now = new Date();
      const days = calculateDaysDifference(startDate, now);
      const timeDiff = calculateTimeDifference(startDate, now);
      
      counterElement.textContent = days;
      shareDaysElement.textContent = days;
      
      // 更新时分秒显示
      const counterParent = counterElement.parentElement;
      const timeDisplay = counterParent.querySelector('p');
      if (timeDisplay) {
        timeDisplay.textContent = `${days}天 ${timeDiff.hours}小时 ${timeDiff.minutes}分钟 ${timeDiff.seconds}秒`;
      }
    }
    
    // 初始化计数器
    updateCounter();
    
    // 每秒更新一次
    setInterval(updateCounter, 1000);
    
    // 模态框动画
    function openModal() {
      dateModal.classList.remove('hidden');
      setTimeout(() => {
        modalContent.classList.remove('scale-95', 'opacity-0');
        modalContent.classList.add('scale-100', 'opacity-100');
      }, 10);
      
      // 设置默认日期为当前日期
      const today = new Date();
      const formattedDate = today.toISOString().split('T')[0];
      startDateInput.value = formattedDate;
    }
    
    function closeModal() {
      modalContent.classList.remove('scale-100', 'opacity-100');
      modalContent.classList.add('scale-95', 'opacity-0');
      setTimeout(() => {
        dateModal.classList.add('hidden');
      }, 300);
    }
    
    // 模态框事件监听
    setDateBtn.addEventListener('click', openModal);
    closeModalBtn.addEventListener('click', closeModal);
    cancelModalBtn.addEventListener('click', closeModal);
    
    // 保存日期
    saveDateBtn.addEventListener('click', () => {
      const selectedDate = new Date(startDateInput.value);
      
      if (selectedDate && !isNaN(selectedDate.getTime())) {
        // 更新开始日期
        startDate.setTime(selectedDate.getTime());
        
        // 更新显示
        startDateDisplay.textContent = formatDate(startDate);
        
        // 重置计数器
        updateCounter();
        
        // 关闭模态框
        closeModal();
        
        // 显示成功消息
        showToast('日期已更新！');
      } else {
        showToast('请选择一个有效的日期！');
      }
    });
    
    // 显示提示消息
    function showToast(message) {
      copyToast.querySelector('span').textContent = message;
      copyToast.classList.remove('translate-y-16', 'opacity-0');
      copyToast.classList.add('translate-y-0', 'opacity-100');
      
      setTimeout(() => {
        copyToast.classList.remove('translate-y-0', 'opacity-100');
        copyToast.classList.add('translate-y-16', 'opacity-0');
      }, 3000);
    }
    
    // 滚动时导航栏效果
    window.addEventListener('scroll', () => {
      const nav = document.querySelector('nav');
      if (window.scrollY > 50) {
        nav.classList.add('py-2', 'shadow-md');
        nav.classList.remove('py-3', 'shadow-sm');
      } else {
        nav.classList.add('py-3', 'shadow-sm');
        nav.classList.remove('py-2', 'shadow-md');
      }
    });
    
    // 页面切换动画
    document.addEventListener('DOMContentLoaded', () => {
      // 为所有内部链接添加动画
      document.querySelectorAll('a[href^="./"], a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
          e.preventDefault();
          
          // 获取目标URL
          const targetUrl = this.getAttribute('href');
          
          // 添加页面退出动画
          document.body.classList.add('page-exit');
          
          // 延迟后跳转到目标页面
          setTimeout(() => {
            window.location.href = targetUrl;
          }, 500);
        });
      });
      
      // 页面加载时添加进入动画
      document.body.classList.add('page-transition');
      setTimeout(() => {
        document.body.classList.remove('page-enter');
      }, 100);
    });
  </script>
</body>
</html>
  <!-- 复制成功提示 -->
  <div id="copy-toast" class="fixed bottom-6 right-6 bg-dark text-white px-6 py-3 rounded-lg shadow-lg transform translate-y-16 opacity-0 transition-all duration-300 flex items-center gap-2 z-50">
    <i class="fa fa-check-circle text-green-400"></i>
    <span>链接已复制到剪贴板</span>
  </div>

  <script>
    // 初始化日期 - 从2025年3月26日开始（134天前）
    // 检查可能导致报错的元素是否存在
    try {
      const startDate = new Date('2025-03-26');
      const currentDate = new Date();
      
      // DOM 元素
      const counterElement = document.getElementById('counter');
      const shareDaysElement = document.getElementById('share-days');
      const startDateDisplay = document.getElementById('start-date-display');
      const currentDateDisplay = document.getElementById('current-date-display');
      const setDateBtn = document.getElementById('set-date-btn');
      const closeModalBtn = document.getElementById('close-modal');
      const cancelModalBtn = document.getElementById('cancel-modal');
      const saveDateBtn = document.getElementById('save-date');
      const startDateInput = document.getElementById('start-date');
      const dateModal = document.getElementById('date-modal');
      const modalContent = document.getElementById('modal-content');
      const copyToast = document.getElementById('copy-toast');

      // 检查获取的元素是否为 null
      const elements = {
        'counter': counterElement,
        'share-days': shareDaysElement,
        'start-date-display': startDateDisplay,
        'current-date-display': currentDateDisplay,
        'set-date-btn': setDateBtn,
        'close-modal': closeModalBtn,
        'cancel-modal': cancelModalBtn,
        'save-date': saveDateBtn,
        'start-date': startDateInput,
        'date-modal': dateModal,
        'modal-content': modalContent,
        'copy-toast': copyToast
      };

      for (const [id, element] of Object.entries(elements)) {
        if (element === null) {
          console.error(`元素 #${id} 未找到，请检查 HTML 中是否存在该元素。`);
        }
      }
    } catch (error) {
      console.error('初始化代码时发生错误:', error);
    }
    
    // 设置日期显示
    function formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}年${month}月${day}日`;
    }
    
    startDateDisplay.textContent = formatDate(startDate);
    currentDateDisplay.textContent = formatDate(currentDate);
    
    // 计算天数差
    function calculateDaysDifference(startDate, endDate) {
      const oneDay = 24 * 60 * 60 * 1000; // 一天的毫秒数
      const diffMs = Math.abs(endDate - startDate);
      return Math.floor(diffMs / oneDay);
    }
    
    // 计算时分秒
    function calculateTimeDifference(startDate, endDate) {
      const diffMs = endDate - startDate;
      const hours = Math.floor((diffMs % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      const minutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));
      const seconds = Math.floor((diffMs % (1000 * 60)) / 1000);
      
      return {
        hours: String(hours).padStart(2, '0'),
        minutes: String(minutes).padStart(2, '0'),
        seconds: String(seconds).padStart(2, '0')
      };
    }
    
    // 更新计数器
    function updateCounter() {
      const now = new Date();
      const days = calculateDaysDifference(startDate, now);
      const timeDiff = calculateTimeDifference(startDate, now);
      
      counterElement.textContent = days;
      shareDaysElement.textContent = days;
      
      // 更新时分秒显示
      const counterParent = counterElement.parentElement;
      const timeDisplay = counterParent.querySelector('p');
      if (timeDisplay) {
        timeDisplay.textContent = `${days}天 ${timeDiff.hours}小时 ${timeDiff.minutes}分钟 ${timeDiff.seconds}秒`;
      }
    }
    
    // 初始化计数器
    updateCounter();
    
    // 每秒更新一次
    setInterval(updateCounter, 1000);
    
    // 模态框动画
    function openModal() {
      dateModal.classList.remove('hidden');
      setTimeout(() => {
        modalContent.classList.remove('scale-95', 'opacity-0');
        modalContent.classList.add('scale-100', 'opacity-100');
      }, 10);
      
      // 设置默认日期为当前日期
      const today = new Date();
      const formattedDate = today.toISOString().split('T')[0];
      startDateInput.value = formattedDate;
    }
    
    function closeModal() {
      modalContent.classList.remove('scale-100', 'opacity-100');
      modalContent.classList.add('scale-95', 'opacity-0');
      setTimeout(() => {
        dateModal.classList.add('hidden');
      }, 300);
    }
    
    // 模态框事件监听
    setDateBtn.addEventListener('click', openModal);
    closeModalBtn.addEventListener('click', closeModal);
    cancelModalBtn.addEventListener('click', closeModal);
    
    // 保存日期
    saveDateBtn.addEventListener('click', () => {
      const selectedDate = new Date(startDateInput.value);
      
      if (selectedDate && !isNaN(selectedDate.getTime())) {
        // 更新开始日期
        startDate.setTime(selectedDate.getTime());
        
        // 更新显示
        startDateDisplay.textContent = formatDate(startDate);
        
        // 重置计数器
        updateCounter();
        
        // 关闭模态框
        closeModal();
        
        // 显示成功消息
        showToast('日期已更新！');
      } else {
        showToast('请选择一个有效的日期！');
      }
    });
    
    // 显示提示消息
    function showToast(message) {
      copyToast.querySelector('span').textContent = message;
      copyToast.classList.remove('translate-y-16', 'opacity-0');
      copyToast.classList.add('translate-y-0', 'opacity-100');
      
      setTimeout(() => {
        copyToast.classList.remove('translate-y-0', 'opacity-100');
        copyToast.classList.add('translate-y-16', 'opacity-0');
      }, 3000);
    }
    
    // 滚动时导航栏效果
    window.addEventListener('scroll', () => {
      const nav = document.querySelector('nav');
      if (window.scrollY > 50) {
        nav.classList.add('py-2', 'shadow-md');
        nav.classList.remove('py-3', 'shadow-sm');
      } else {
        nav.classList.add('py-3', 'shadow-sm');
        nav.classList.remove('py-2', 'shadow-md');
      }
    });
    
    // 页面切换动画
    document.addEventListener('DOMContentLoaded', () => {
      // 为所有内部链接添加动画
      document.querySelectorAll('a[href^="./"], a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
          e.preventDefault();
          
          // 获取目标URL
          const targetUrl = this.getAttribute('href');
          
          // 添加页面退出动画
          document.body.classList.add('page-exit');
          
          // 延迟后跳转到目标页面
          setTimeout(() => {
            window.location.href = targetUrl;
          }, 500);
        });
      });
      
      // 页面加载时添加进入动画
      document.body.classList.add('page-transition');
      setTimeout(() => {
        document.body.classList.remove('page-enter');
      }, 100);
    });
  </script>
</body>
</html>
  <!-- 复制成功提示 -->
  <div id="copy-toast" class="fixed bottom-6 right-6 bg-dark text-white px-6 py-3 rounded-lg shadow-lg transform translate-y-16 opacity-0 transition-all duration-300 flex items-center gap-2 z-50">
    <i class="fa fa-check-circle text-green-400"></i>
    <span>链接已复制到剪贴板</span>
  </div>

  <script>
    // 初始化日期 - 从2025年3月26日开始（134天前）
    const startDate = new Date('2025-03-26');
    const currentDate = new Date();
    
    // DOM 元素
    const counterElement = document.getElementById('counter');
    const shareDaysElement = document.getElementById('share-days');
    const startDateDisplay = document.getElementById('start-date-display');
    const currentDateDisplay = document.getElementById('current-date-display');
    const setDateBtn = document.getElementById('set-date-btn');
    const closeModalBtn = document.getElementById('close-modal');
    const cancelModalBtn = document.getElementById('cancel-modal');
    const saveDateBtn = document.getElementById('save-date');
    const startDateInput = document.getElementById('start-date');
    const dateModal = document.getElementById('date-modal');
    const modalContent = document.getElementById('modal-content');
    const copyToast = document.getElementById('copy-toast');
    
    // 设置日期显示
    function formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}年${month}月${day}日`;
    }
    
    startDateDisplay.textContent = formatDate(startDate);
    currentDateDisplay.textContent = formatDate(currentDate);
    
    // 计算天数差
    function calculateDaysDifference(startDate, endDate) {
      const oneDay = 24 * 60 * 60 * 1000; // 一天的毫秒数
      const diffMs = Math.abs(endDate - startDate);
      return Math.floor(diffMs / oneDay);
    }
    
    // 计算时分秒
    function calculateTimeDifference(startDate, endDate) {
      const diffMs = endDate - startDate;
      const hours = Math.floor((diffMs % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      const minutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));
      const seconds = Math.floor((diffMs % (1000 * 60)) / 1000);
      
      return {
        hours: String(hours).padStart(2, '0'),
        minutes: String(minutes).padStart(2, '0'),
        seconds: String(seconds).padStart(2, '0')
      };
    }
    
    // 更新计数器
    function updateCounter() {
      const now = new Date();
      const days = calculateDaysDifference(startDate, now);
      const timeDiff = calculateTimeDifference(startDate, now);
      
      counterElement.textContent = days;
      shareDaysElement.textContent = days;
      
      // 更新时分秒显示
      const counterParent = counterElement.parentElement;
      const timeDisplay = counterParent.querySelector('p');
      if (timeDisplay) {
        timeDisplay.textContent = `${days}天 ${timeDiff.hours}小时 ${timeDiff.minutes}分钟 ${timeDiff.seconds}秒`;
      }
    }
    
    // 初始化计数器
    updateCounter();
    
    // 每秒更新一次
    setInterval(updateCounter, 1000);
    
    // 模态框动画
    function openModal() {
      dateModal.classList.remove('hidden');
      setTimeout(() => {
        modalContent.classList.remove('scale-95', 'opacity-0');
        modalContent.classList.add('scale-100', 'opacity-100');
      }, 10);
      
      // 设置默认日期为当前日期
      const today = new Date();
      const formattedDate = today.toISOString().split('T')[0];
      startDateInput.value = formattedDate;
    }
    
    function closeModal() {
      modalContent.classList.remove('scale-100', 'opacity-100');
      modalContent.classList.add('scale-95', 'opacity-0');
      setTimeout(() => {
        dateModal.classList.add('hidden');
      }, 300);
    }
    
    // 模态框事件监听
    setDateBtn.addEventListener('click', openModal);
    closeModalBtn.addEventListener('click', closeModal);
    cancelModalBtn.addEventListener('click', closeModal);
    
    // 保存日期
    saveDateBtn.addEventListener('click', () => {
      const selectedDate = new Date(startDateInput.value);
      
      if (selectedDate && !isNaN(selectedDate.getTime())) {
        // 更新开始日期
        startDate.setTime(selectedDate.getTime());
        
        // 更新显示
        startDateDisplay.textContent = formatDate(startDate);
        
        // 重置计数器
        updateCounter();
        
        // 关闭模态框
        closeModal();
        
        // 显示成功消息
        showToast('日期已更新！');
      } else {
        showToast('请选择一个有效的日期！');
      }
    });
    
    // 显示提示消息
    function showToast(message) {
      copyToast.querySelector('span').textContent = message;
      copyToast.classList.remove('translate-y-16', 'opacity-0');
      copyToast.classList.add('translate-y-0', 'opacity-100');
      
      setTimeout(() => {
        copyToast.classList.remove('translate-y-0', 'opacity-100');
        copyToast.classList.add('translate-y-16', 'opacity-0');
      }, 3000);
    }
    
    // 滚动时导航栏效果
    window.addEventListener('scroll', () => {
      const nav = document.querySelector('nav');
      if (window.scrollY > 50) {
        nav.classList.add('py-2', 'shadow-md');
        nav.classList.remove('py-3', 'shadow-sm');
      } else {
        nav.classList.add('py-3', 'shadow-sm');
        nav.classList.remove('py-2', 'shadow-md');
      }
    });
    
    // 页面切换动画
    document.addEventListener('DOMContentLoaded', () => {
      // 为所有内部链接添加动画
      // 修正选择器，仅匹配以 # 开头的内部锚点链接，避免因 ./ 引发问题
      document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
          e.preventDefault(); // 阻止默认跳转行为

          const targetId = this.getAttribute('href');
          const targetElement = document.querySelector(targetId);

          if (targetElement) {
            // 平滑滚动到目标元素
            window.scrollTo({
              top: targetElement.offsetTop,
              behavior: 'smooth'
            });
          }
        });
      });
    });
